<template>
  <view class="store-details-container">
    
    <!-- 加油站图片 -->
    <view class="station-image-container">
      <image 
        :src="stationInfo.image || '/static/加油站01.png'" 
        class="station-image"
        mode="aspectFill"
        @error="onImageError"
        @load="onImageLoad"
      />
    
    </view>
    
    <!-- 加油站基本信息 -->
    <view class="station-info">
      <view class="station-name">{{ stationInfo.name }}</view>
      
      <!-- 营业时间 -->
      <view class="info-row">
        <view class="info-label">营业时间</view>
        <view class="info-content">{{ stationInfo.businessHours || '周一至周五 09:00-22:00' }}</view>
        <view class="info-action">
          <image src="/static/static-lj/电话.png" class="action-icon" />
        </view>
      </view>
      
      <!-- 地址 -->
      <view class="info-row">
        <view class="info-label">地址</view>
        <view class="info-content">{{ stationInfo.address }}</view>
        <view class="info-action">
          <image src="/static/static-lj/plane.png" class="action-icon" />
        </view>
      </view>
    </view>
    
    <!-- 分割线 -->
    <view class="divider"></view>
    
    <!-- 油价详情 -->
    <view class="price-section">
      <view class="section-title">油价详情</view>
      <view class="price-list">
        <view 
          v-for="(price, index) in stationInfo.fuelPrices" 
          :key="index"
          class="price-item"
        >
          <view class="fuel-type">{{ price.type }}</view>
          <view class="fuel-price">¥{{ price.price }}/L</view>
        </view>
      </view>
    </view>

  </view>
</template>

<script>
export default {
  data() {
    return {
      stationInfo: {
        id: '',
        name: '中途石油加油站',
        brand: '中国石油',
        address: '山阳区人民中路32号',
        businessHours: '周一至周五 09:00-22:00',
        image: '/static/加油站01.png',
        fuelPrices: [
          { type: '92#', price: '5.85' },
          { type: '95#', price: '5.85' },
          { type: '98#', price: '5.85' },
          { type: '0#', price: '5.85' }
        ],
      
      }
    }
  },
  
  onLoad(options) {
    console.log('门店详情页面加载，参数：', options);
    
    // 获取传递的加油站信息
    if (options.stationId) {
      this.loadStationInfo(options);
    }
  },
  
  methods: {
    
    // 加载加油站信息
    loadStationInfo(options) {
      console.log('加载加油站信息，参数：', options);
      
      // 如果有传递的参数，使用传递的信息
      if (options.stationId) {
        this.stationInfo.id = options.stationId;
        this.stationInfo.name = decodeURIComponent(options.name || this.stationInfo.name);
        this.stationInfo.address = decodeURIComponent(options.address || this.stationInfo.address);
        this.stationInfo.latitude = parseFloat(options.latitude) || this.stationInfo.latitude;
        this.stationInfo.longitude = parseFloat(options.longitude) || this.stationInfo.longitude;
        
        // 如果有价格信息，更新价格
        if (options.price) {
          this.stationInfo.fuelPrices = [
            { type: '92#', price: options.price },
            { type: '95#', price: options.price },
            { type: '98#', price: options.price },
            { type: '0#', price: options.price }
          ];
        }
        
        // 如果有图片信息，更新图片
        if (options.image) {
          this.stationInfo.image = decodeURIComponent(options.image);
        }
        
        console.log('更新后的加油站信息：', this.stationInfo);
      }
    },
    

  }
}
</script>

<style scoped>
.store-details-container {
  background-color: #f5f5f5;
  min-height: 100vh;
  padding-bottom: 120rpx;
  padding-top: 20rpx;
  position: relative;
}

/* 页面背景色区域 - 顶部蓝色区域 */
.store-details-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 350rpx; /* 蓝色区域高度 */
  background-color: #3184FD;
  z-index: 0; /* 在页面内容下方 */
}


.station-image-container {
  position: relative;
  width: calc(100% - 60rpx);
  height: 400rpx;
  overflow: hidden;
  margin: 0 30rpx 20rpx 30rpx;
  border-radius: 16rpx;
  z-index: 10;
}

.station-image {
  width: 100%;
  height: 100%;
}

.image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.3), transparent);
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 40rpx;
}

.station-brand {
  background-color: rgba(255, 255, 255, 0.9);
  color: #d32f2f;
  padding: 10rpx 20rpx;
  border-radius: 8rpx;
  font-size: 28rpx;
  font-weight: bold;
}

.station-info {
  background-color: #fff;
  padding: 40rpx;
  margin: 0 30rpx 20rpx 30rpx;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
  position: relative;
  z-index: 10;
}

.station-name {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 30rpx;
}

.info-row {
  display: flex;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
}

.info-row:last-child {
  border-bottom: none;
}

.info-label {
  font-size: 28rpx;
  color: #666;
  width: 120rpx;
  flex-shrink: 0;
}

.info-content {
  flex: 1;
  font-size: 28rpx;
  color: #333;
  margin: 0 20rpx;
}

.info-action {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f8f8f8;
  border-radius: 50%;
  opacity: 0.6;
}

.action-icon {
  width: 32rpx;
  height: 32rpx;
}

.divider {
  height: 20rpx;
  background-color: #f5f5f5;
}

.price-section {
  background-color: #fff;
  padding: 40rpx;
  margin: 0 30rpx 20rpx 30rpx;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
  position: relative;
  z-index: 10;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 30rpx;
}

.price-list {
  background-color: #f8f8f8;
  border-radius: 12rpx;
  overflow: hidden;
}

.price-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx 40rpx;
  border-bottom: 1rpx solid #e0e0e0;
}

.price-item:last-child {
  border-bottom: none;
}

.fuel-type {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
}

.fuel-price {
  font-size: 32rpx;
  color: #d32f2f;
  font-weight: bold;
}

.services-section {
  background-color: #fff;
  padding: 40rpx;
  margin-bottom: 20rpx;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30rpx;
}

.service-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx;
  background-color: #f8f8f8;
  border-radius: 12rpx;
}

.service-icon {
  width: 48rpx;
  height: 48rpx;
  margin-bottom: 10rpx;
}

.service-name {
  font-size: 24rpx;
  color: #666;
  text-align: center;
}

.bottom-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  padding: 20rpx 40rpx;
  display: flex;
  gap: 20rpx;
  box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.action-btn {
  flex: 1;
  height: 80rpx;
  border-radius: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10rpx;
  font-size: 28rpx;
  font-weight: bold;
  border: none;
}

.action-btn.primary {
  background-color: #0a78ff;
  color: #fff;
}

.action-btn.secondary {
  background-color: #f8f8f8;
  color: #666;
  border: 1rpx solid #ddd;
}

.btn-icon {
  width: 32rpx;
  height: 32rpx;
}
</style>